<template>
  <el-dialog
    class="public-dialog"
    title="物流轨迹"
    width="720"
    :modelValue="modelValue"
    @close="handleClose"
    draggable
    align-center
  >
    <div
      class="packageDetail overflow-auto"
      :class="activities.length === 0 ? 'h-[200px]' : 'h-[600px]'"
    >
      <Descriptions label="快递单号" :labelWidth="labelWidth">
        <template #value>
          <div>
            {{ data?.logistics_name || "-" }}｜{{ data.tracking_number || "-" }}
          </div>
        </template>
      </Descriptions>
      <Descriptions label="当前状态" :labelWidth="labelWidth">
        <template #value>
          <span class="text-[var(--info-color)]">
            {{ data?.sys_status_name || "-" }}
          </span>
          <span>(系统)</span>
        </template>
      </Descriptions>
      <Descriptions
        label="轨迹详情"
        :labelWidth="labelWidth"
        alignItems="flex-start"
      >
        <template #value>
          <div v-if="activities.length === 0">暂无物流信息</div>
          <div class="mt-[4px]">
            <el-timeline>
              <el-timeline-item
                v-for="(activity, index) in activities"
                :key="activity.id"
                icon="Check"
                :type="activity.type"
                :color="activity.color"
                :size="activity.size"
                :hollow="activity.hollow"
                :timestamp="activity.timestamp"
              >
                <span
                  v-if="index === 0"
                  class="text-[12px] scale-[0.8] leading-[14px] px-[5px] py-[2px] rounded-[5px] rounded-br-[0] text-center bg-[#FF609E] text-[#fff] mr-[4px]"
                >
                  最新
                </span>
                {{ activity.content }}
              </el-timeline-item>
            </el-timeline>
          </div>
        </template>
      </Descriptions>
    </div>
    <template #footer>
      <div class="dialog-button">
        <el-button @click="handleClose(false)"> 关闭 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import Descriptions from "@/components/Descriptions/index.vue";
import { packageNoDetail } from "../../api/index.js";

const props = defineProps({
  data: { type: [String, Number], default: () => {} },
  modelValue: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
});

const emit = defineEmits(["update:modelValue", "close"]);

const labelWidth = "72px";

watch(
  () => props.data,
  (val) => {
    if (!val) return;
    getDetail(val);
  }
);

const getDetail = async (item) => {
  try {
    const { order_id } = item || {};
    const { data } = await packageNoDetail({
      qtype: 1,
      order_id,
    });
    activities.value = data.map((n) => ({
      content: `${n.content}`,
      timestamp: n.api_last_time,
      color: "#0bbd87",
      size: "large",
    }));
  } catch (e) {
    console.error(e);
  }
};

const activities = ref([]);

const handleClose = () => {
  emit("update:modelValue", false);
  emit("close");
};
</script>

<style lang="scss" scoped>
.packageDetail {
  :deep(.descriptions .label) {
    color: var(--base-text-color);
  }
}
</style>
